<template>
  <div class="d_main">
    <!-- 操作区 S-->
    <div class="d_operationBox">
      <div class="d_btn">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          v-permission="'MenuCode5-3-2-1'"
          @click="newAddClick"
          >新建</el-button
        >
      </div>
      <div class="d_search">
        <screec
          v-model="search.QueryDataBaseFiled"
          :headData.sync="tableHead"
          :disabled="searchLoading"
        ></screec>
        <el-input
          v-model="search.likeWords"
          placeholder="请输入关键字"
          size="small"
          @keyup.enter.native="getDataLists"
        >
          <el-button
            slot="append"
            :loading="searchLoading"
            type="primary"
            icon="el-icon-search"
            :disabled="searchLoading"
            element-loading-spinner="el-icon-loading"
            @click="getDataLists"
          >
            搜索
          </el-button>
        </el-input>
      </div>
    </div>
    <!-- 操作区 E-->
    <!-- 表格操作区 S-->
    <div class="d_tableOperation">
      <div class="d_condition"></div>
      <div class="d_set">
        <div @click="Refresh"><i class="d_icon el-icon-refresh-right" /></div>
        <div class="setting flex">
          <HeadSeting
            :list-data.sync="tableHead"
            :table-code="$config.outStockProductList"
            @reset="getTableHead"
          />
        </div>
      </div>
    </div>
    <!-- 表格操作区 E-->
    <!--table板块-->
    <div ref="tableCon" class="tableCon">
      <el-table
        v-show="tableHead.length > 0"
        id="emtable"
        ref="multipleTable"
        v-loading="searchLoading"
        :data="dataLists"
        :height="tableHeight || 'auto'"
        border
        fit
        style="width: 100%"
        @header-dragend="surverWidth"
      >
        <template v-for="(fruit, index) in tableHead">
          <el-table-column
            v-if="fruit.visible"
            :key="index"
            :label="fruit.columnName"
            :min-width="fruit.columnWidth || 110"
            :prop="fruit.columnCode"
            show-overflow-tooltip
            :fixed="fruit.isFloat ? 'left' : false"
          >
            <template slot-scope="scope">
              <template v-if="fruit.columnCode === 'outStockProductStateName'">
                <div class="flex">
                  <template v-if="scope.row.outStockProductState === 0">
                    <span class="mr5 spot" style="background: #3f61f1" /><span
                      >待确认</span
                    >
                  </template>
                  <template v-else-if="scope.row.outStockProductState === 1">
                    <span class="mr5 spot" style="background: #67c23a" /><span
                      >已确认</span
                    >
                  </template>
                  <template v-else>
                    <span class="mr5 spot" style="background: #e13335" /><span
                      >已拒绝</span
                    >
                  </template>
                </div>
              </template>
              <template v-else>
                {{ scope.row[fruit.columnCode] }}
              </template>
            </template>
          </el-table-column>
        </template>
        <el-table-column label="操作" width="70px" fixed="right" align="center">
          <template slot-scope="scope">
            <div>
              <el-popover
                :ref="`popover-${scope.$index}`"
                placement="bottom-end"
                popper-class="tableOp"
                width="160"
                :popper-options="{
                  boundariesElement: 'opBox',
                  removeOnDestroy: true,
                }"
                trigger="click"
              >
                <div class="operation">
                  <ul>
                    <li @click="seeInfo(scope.row.outStockID)">查看</li>
                  </ul>
                </div>
                <div slot="reference" class="opBox pointer">
                  <span class="el-icon-more c_3F61F1" />
                </div>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 骨架屏     -->
      <div v-if="tableHead.length == 0" class="p16">
        <el-skeleton :rows="6" animated />
      </div>
    </div>
    <!-- 分页 S-->
    <div class="d_pag">
      <pagination
        :total="total || 0"
        :page.sync="search.pageIndex"
        :limit.sync="search.pageSize"
        @pagination="getDataLists"
      />
    </div>
    <!-- 分页 E-->
    <!-- 选择发货单 -->
    <el-dialog
      v-dialogDrag
      title="选择发货单"
      :visible.sync="isPickingVisible"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
    >
      <div class="dialogDody marDialog flex flex_column">
        <!-- 搜索     -->
        <div class="btnCon flex flex_between" style="border-bottom: none">
          <!--      搜索框-->
          <div class="search">
            <el-input
              v-model="deliverySearch.likeWords"
              prefix-icon="el-icon-search"
              placeholder="输入关键字"
              size="small"
              @keyup.enter.native="getSelectDeliveryList"
            >
            </el-input>
          </div>
        </div>
        <!-- 表格区域       -->
        <div class="tableCon lastTdNoBorder not pt0" style="padding: 16px">
          <el-table
            v-loading="purLoading"
            :data="deliveryLists"
            max-height="460"
            :row-class-name="tableRowClassName"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="deliveryBillNo"
              label="发货单号"
              min-width="150"
            />
            <el-table-column
              prop="deliveryTypeName"
              label="发货类型"
              min-width="100"
            />
            <el-table-column
              prop="createTime"
              label="创建时间"
              show-overflow-tooltip
              min-width="110"
            />
            <el-table-column
              prop="createPersonName"
              label="申请人员"
              min-width="100"
            />
            <el-table-column
              prop="detailsCount"
              label="发货明细"
              min-width="90"
            />
            <el-table-column
              prop="expressSumQuantity"
              label="总数量"
              show-overflow-tooltip
              min-width="120"
            />
            <el-table-column
              prop="deliveryRemark"
              label="备注"
              min-width="150"
              show-overflow-tooltip
            >
              <template scope="{row}">
                {{ row.deliveryRemark || "--" }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="100px"
              fixed="right"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="medium"
                  style="color: #606266"
                  @click="confirmSelecd(scope.row)"
                >
                  选择
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isPickingVisible=false">取 消</el-button>
        <el-button
          type="primary"
          size="mini"
          :disabled="isSelect"
          :loading="isSelect"
          @click="confirmSelecd"
        >确定</el-button>
      </span> -->
    </el-dialog>
    <!--  新建成品出库  -->
    <el-dialog
      title="新建成品出库"
      :visible.sync="isAddDialog"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="95%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"
            ><span class="mr5">出库单号：</span
            >{{ deliveryForm.outStockProductNo || "系统自动生成" }}</span
          >
          <span class="mr15"
            ><span class="mr5">创建日期：</span
            >{{ deliveryForm.createTime || dayjs().format("YYYY-MM-DD") }}</span
          >
          <span><span class="mr5">创建人员：</span>{{ name }}</span>
        </div>
        <div class="deliveryBox">
          <el-form
            ref="deliveryForm"
            :model="deliveryForm"
            :rules="rules"
            label-width="80px"
            label-position="left"
            class="dialogForm dialogInlineForm flex flex_start flex1"
            style="height: 100%"
          >
            <div class="addWuliaoBox" style="overflow-x: hidden">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="出库类型">
                    <el-input
                      v-model="deliveryForm.outStockProductTypeName"
                      placeholder="请输入领料类型"
                      size="mini"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="关联单据">
                    <el-input
                      v-model="deliveryForm.deliveryBillNo"
                      placeholder="关联单据"
                      size="mini"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="申请人员">
                    <el-input
                      v-model="deliveryForm.receivePersonName"
                      placeholder="请输入内容"
                      disabled
                      size="mini"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="客户名称">
                    <el-input
                      v-model="deliveryForm.customerName"
                      placeholder="领料设备"
                      size="mini"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="收货人员">
                    <el-input
                      v-model="deliveryForm.contactPersonName"
                      placeholder="领料设备"
                      size="mini"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="联系电话">
                    <el-input
                      v-model="deliveryForm.contactTelephone"
                      placeholder="联系电话"
                      size="mini"
                      disabled
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="收货地址" class="inlineText">
                    <el-input
                      v-model="deliveryForm.receivingAddress"
                      type="textarea"
                      :rows="1"
                      placeholder="请输入领料备注"
                      size="mini"
                      disabled
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="发货备注" class="inlineText mt5">
                    <el-input
                      v-model="deliveryForm.deliveryRemark"
                      type="textarea"
                      :rows="1"
                      placeholder="请输入出库备注"
                      size="mini"
                      disabled
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="tableBox expandBox">
                <div class="tt flex flex_between">
                  <span class="fw">发货明细</span>
                </div>
                <el-table
                  :data="deliveryForm.outStockMxList"
                  border
                  default-expand-all
                  style="width: 100%"
                >
                  <el-table-column type="expand">
                    <template slot-scope="{ row }">
                      <div class="dialogExpandTable">
                        <el-table
                          :data="row.ggCpFhList || []"
                          :header-cell-style="{ background: '#3f61f110' }"
                        >
                          <el-table-column
                            prop="cartonSizeName"
                            label="纸箱规格"
                            min-width="90"
                          />
                          <el-table-column
                            prop="packageDescription"
                            label="包装描述"
                            min-width="90"
                          />
                          <el-table-column
                            prop="eachBoxQuantity"
                            label="每箱数量"
                            min-width="90"
                          />
                          <el-table-column
                            prop="stockBoxCount"
                            label="库存箱数"
                            min-width="90"
                          />
                          <el-table-column
                            prop="stockQuantity"
                            label="库存数量"
                            min-width="100"
                          />
                          <el-table-column
                            prop="deliveryBoxCount"
                            label="发货箱数"
                            min-width="100"
                          />
                          <el-table-column
                            prop="deliveryQuantity"
                            label="发货数量"
                            min-width="90"
                          />
                          <el-table-column
                            label="出库库位"
                            prop="stockArea"
                            min-width="150"
                          >
                            <template slot-scope="{ row }">
                              <el-cascader
                                v-model="row.stockArea"
                                size="mini"
                                clearable
                                @change="stockAreaChange"
                                :show-all-levels="false"
                                :options="storageLocations"
                                :props="{ label: 'name', value: 'code' }"
                              />
                            </template>
                          </el-table-column>
                          <el-table-column
                            prop="deliveryMxRemark"
                            label="备注"
                            show-overflow-tooltip
                            min-width="150"
                          />
                        </el-table>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="关联订单"
                    prop="xieYiShuHao"
                    show-overflow-tooltip
                    min-width="110"
                  />
                  <el-table-column
                    label="成品编号"
                    prop="productNo"
                    min-width="90"
                  />
                  <el-table-column
                    label="成品类型"
                    prop="productType"
                    show-overflow-tooltip
                    min-width="110"
                  />
                  <el-table-column
                    label="产品名称"
                    prop="productName"
                    show-overflow-tooltip
                    min-width="110"
                  />
                  <el-table-column
                    label="版面"
                    prop="printingSurface"
                    min-width="150"
                  />
                  <el-table-column
                    label="版本"
                    show-overflow-tooltip
                    min-width="90"
                    prop="productVersion"
                  />
                  <el-table-column
                    label="库存箱数"
                    show-overflow-tooltip
                    min-width="90"
                    prop="stockSumBoxCount"
                  />
                  <el-table-column
                    label="库存数量"
                    prop="stockSumQuantity"
                    min-width="80"
                  />
                  <el-table-column
                    label="已发箱数"
                    prop="orderYfSumBoxCount"
                    min-width="80"
                  />
                  <el-table-column
                    label="已发数量"
                    prop="orderYfSumQuantity"
                    min-width="80"
                  />
                  <el-table-column
                    label="发货箱数"
                    prop="orderNowFhSumBoxCount"
                    min-width="80"
                  />
                  <el-table-column
                    label="发货数量"
                    prop="orderNowFhSumQuantity"
                    min-width="80"
                  />
                  <el-table-column
                    label="单位"
                    show-overflow-tooltip
                    min-width="150"
                    prop="productUnit"
                  />
                </el-table>
              </div>
            </div>
            <div
              style="
                width: 310px;
                padding-left: 10px;
                border-left: 1px solid #e6e6e6;
                height: 100%;
              "
            >
              <el-row>
                <el-col :span="24">
                  <el-form-item label="收货方式" class="inlineText">
                    <el-select
                        filterable
                      v-model="deliveryForm.receivingWay"
                      placeholder="收货方式"
                      size="mini"
                    >
                      <el-option
                        v-for="item in receivingTypeList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="送货方式" class="inlineText">
                    <el-select
                        filterable
                      v-model="deliveryForm.expressWay"
                      placeholder="送货方式"
                      size="mini"
                    >
                      <el-option
                        v-for="item in sendingTypeList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="快递单号" class="inlineText">
                    <el-input
                      v-model="deliveryForm.expressBillNo"
                      placeholder="快递单号"
                      size="mini"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="送货日期" class="inlineText">
                    <el-date-picker
                      v-model="deliveryForm.expressTime"
                      size="mini"
                      type="date"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="快递费用" class="inlineText">
                    <el-input
                      v-model="deliveryForm.expressCost"
                      placeholder="请输入快递费用"
                      size="mini"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="付费方式" class="inlineText">
                    <el-select
                        filterable
                      v-model="deliveryForm.paymentWay"
                      placeholder="请选择付费方式"
                      size="mini"
                    >
                      <el-option
                        v-for="item in logisticsPaidList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="费用部门" class="inlineText">
                    <el-select
                        filterable
                      v-model="deliveryForm.costAssumeDepartment"
                      placeholder="请选择费用部门"
                      size="mini"
                    >
                      <el-option
                        v-for="item in departmentList"
                        :key="item.departmentCode"
                        :label="item.departmentName"
                        :value="item.departmentCode"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="公斤数" class="inlineText">
                    <el-input
                      v-model="deliveryForm.expressGoodsWeight"
                      placeholder="请输入公斤数"
                      size="mini"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="件数" class="inlineText">
                    <el-input
                      v-model="deliveryForm.expressGoodsCount"
                      placeholder="请输入件数"
                      size="mini"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddDialog = false">取 消</el-button>
        <!--  同意      -->
        <el-button
          :loading="addLoading"
          :disabled="addLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveAdd"
          >同意</el-button
        >
      </div>
    </el-dialog>
    <!--  查看成品出库  -->
    <el-dialog
      title="查看成品出库"
      :visible.sync="isSeeDialog"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="95%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"
            ><span class="mr5">出库单号：</span
            >{{ deliveryForm.outStockBillNo || "系统自动生成" }}</span
          >
          <span class="mr15"
            ><span class="mr5">创建日期：</span
            >{{ deliveryForm.createTime || dayjs().format("YYYY-MM-DD") }}</span
          >
          <span><span class="mr5">创建人员：</span>{{ name }}</span>
        </div>
        <div class="deliveryBox">
          <el-form
            ref="deliveryForm"
            :model="deliveryForm"
            :rules="rules"
            label-width="80px"
            label-position="left"
            class="dialogForm dialogInlineForm flex flex_start flex1"
            style="height: 100%"
          >
            <div class="addWuliaoBox" style="overflow-x: hidden">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="出库类型">
                    <el-input
                      v-model="deliveryForm.outStockTypeName"
                      placeholder="请输入领料类型"
                      size="mini"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="关联单据">
                    <el-input
                      v-model="deliveryForm.associationBillNo"
                      placeholder="关联单据"
                      size="mini"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="申请人员">
                    <el-input
                      v-model="deliveryForm.deliveryPersonName"
                      placeholder="请输入内容"
                      disabled
                      size="mini"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="客户名称">
                    <el-input
                      v-model="deliveryForm.customerName"
                      placeholder="领料设备"
                      size="mini"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="收货人员">
                    <el-input
                      v-model="deliveryForm.contactPersonName"
                      placeholder="领料设备"
                      size="mini"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="联系电话">
                    <el-input
                      v-model="deliveryForm.contactTelephone"
                      placeholder="领料设备"
                      size="mini"
                      disabled
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="收货地址" class="inlineText">
                    <el-input
                      v-model="deliveryForm.receivingAddress"
                      type="textarea"
                      :rows="1"
                      placeholder="请输入领料备注"
                      size="mini"
                      disabled
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="发货备注" class="inlineText mt5">
                    <el-input
                      v-model="deliveryForm.deliveryRemark"
                      type="textarea"
                      :rows="1"
                      placeholder="请输入出库备注"
                      size="mini"
                      disabled
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="tableBox expandBox">
                <div class="tt flex flex_between">
                  <span class="fw">发货明细</span>
                </div>
                <el-table
                  :data="deliveryForm.outStockMxList"
                  border
                  default-expand-all
                  style="width: 100%"
                >
                  <el-table-column type="expand">
                    <template slot-scope="{ row }">
                      <div class="dialogExpandTable">
                        <el-table
                          :data="row.ggCpFhList || []"
                          :header-cell-style="{ background: '#3f61f110' }"
                        >
                          <el-table-column
                            prop="cartonSizeName"
                            label="纸箱规格"
                            min-width="90"
                          />
                          <el-table-column
                            prop="packageDescription"
                            label="包装描述"
                            min-width="90"
                          />
                          <el-table-column
                            prop="eachBoxQuantity"
                            label="每箱数量"
                            min-width="90"
                          />
                          <el-table-column
                            prop="deliveryBoxCount"
                            label="发货箱数"
                            min-width="100"
                          />
                          <el-table-column
                            prop="deliveryQuantity"
                            label="发货数量"
                            min-width="90"
                          />
                          <el-table-column
                            label="出库库位"
                            prop="stockArea"
                            min-width="150"
                          >
                            <template slot-scope="{ row }">
                              {{ row.warehouseAreaName+row.areaShelfName }}
                            </template>
                          </el-table-column>
                          <el-table-column
                            prop="deliveryMxRemark"
                            label="备注"
                            show-overflow-tooltip
                            min-width="150"
                          />
                        </el-table>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="关联订单"
                    prop="xieYiShuHao"
                    show-overflow-tooltip
                    min-width="110"
                  />
                  <el-table-column
                    label="成品编号"
                    prop="productNo"
                    min-width="90"
                  />
                  <el-table-column
                    label="成品类型"
                    prop="productType"
                    show-overflow-tooltip
                    min-width="110"
                  />
                  <el-table-column
                    label="产品名称"
                    prop="productName"
                    show-overflow-tooltip
                    min-width="110"
                  />
                  <el-table-column
                    label="版面"
                    prop="printingSurface"
                    min-width="150"
                  />
                  <el-table-column
                    label="版本"
                    show-overflow-tooltip
                    min-width="90"
                    prop="productVersion"
                  />
                  <el-table-column
                    label="发货箱数"
                    prop="orderNowFhSumBoxCount"
                    min-width="80"
                  />
                  <el-table-column
                    label="发货数量"
                    prop="orderNowFhSumQuantity"
                    min-width="80"
                  />
                  <el-table-column
                    label="单位"
                    show-overflow-tooltip
                    min-width="150"
                    prop="productUnit"
                  />
                </el-table>
              </div>
            </div>
            <div
              style="
                width: 310px;
                padding-left: 10px;
                border-left: 1px solid #e6e6e6;
                height: 100%;
              "
            >
              <el-row>
                <el-col :span="24">
                  <el-form-item label="收货方式" class="inlineText">
                    <el-select
                        filterable
                      v-model="deliveryForm.receivingWay"
                      placeholder="收货方式"
                      size="mini"
                      disabled
                    >
                      <el-option
                        v-for="item in receivingTypeList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="送货方式" class="inlineText">
                    <el-select
                        filterable
                      v-model="deliveryForm.expressWay"
                      placeholder="送货方式"
                      disabled
                      size="mini"
                    >
                      <el-option
                        v-for="item in sendingTypeList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="快递单号" class="inlineText">
                    <el-input
                      v-model="deliveryForm.expressBillNo"
                      placeholder="快递单号"
                      disabled
                      size="mini"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="送货日期" class="inlineText">
                    <el-date-picker
                      v-model="deliveryForm.expressTime"
                      size="mini"
                      type="date"
                      disabled
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="快递费用" class="inlineText">
                    <el-input
                      v-model="deliveryForm.expressCost"
                      disabled
                      placeholder="请输入快递费用"
                      size="mini"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="付费方式" class="inlineText">
                    <el-select
                        filterable
                      v-model="deliveryForm.paymentWay"
                      disabled
                      placeholder="请选择付费方式"
                      size="mini"
                    >
                      <el-option
                        v-for="item in logisticsPaidList"
                        :key="item.code"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="费用部门" class="inlineText">
                    <el-select
                        filterable
                      v-model="deliveryForm.costAssumeDepartment"
                      disabled
                      placeholder="请选择费用部门"
                      size="mini"
                    >
                      <el-option
                        v-for="item in departmentList"
                        :key="item.departmentCode"
                        :label="item.departmentName"
                        :value="item.departmentCode"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="公斤数" class="inlineText">
                    <el-input
                      v-model="deliveryForm.expressGoodsWeight"
                      disabled
                      placeholder="请输入公斤数"
                      size="mini"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="件数" class="inlineText">
                    <el-input
                      v-model="deliveryForm.expressGoodsCount"
                      disabled
                      placeholder="请输入件数"
                      size="mini"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isSeeDialog = false">取 消</el-button>
        <!--  同意      -->
        <el-button type="primary" size="mini" @click="isSeeDialog = false"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import MixA from "@/utils/mixin";
const mixa = new MixA();
import Pagination from "@/components/Pagination";
import HeadSeting from "@/components/HeadSeting";
import { mapGetters } from "vuex";
import { arraySort } from "@/utils";
import screec from "@/components/screen";
export default {
  name: "",
  components: { Pagination, HeadSeting, screec },
  mixins: [mixa],
  computed: {
    ...mapGetters(["name", "userInfo"]),
  },
  data() {
    return {
      isSeeDialog: false,
      radioSelect: null, // 发货单选中值
      addLoading: false,
      isAddDialog: false,
      purLoading: false,
      isSelect: false,
      storageLocations: [], // 库位列表
      isPickingVisible: false, // 发货单弹框是否打开
      currentRow: {}, // 选中的发货单
      searchLoading: false,
      deliveryForm: {
        associationBillNo: "",  //关联单据号（发货单号）
        outStockBillRemark: "", //出库单备注
        receivingWay: "", //快递方式（收货方式）
        expressWay: "", //送货方式
        expressBillNo: "",  //快递单号
        expressTime: "",  //送货日期，格式：yyyy-MM-dd HH:mm:ss
        expressCost: 0, //快递费用
        paymentWay: "", //付费方式
        costAssumeDepartment: "", //费用部门
        expressGoodsWeight: 0,  //快递物品重量（公斤数）
        expressGoodsCount: 0, //快递物品件数
        outStockMxList: [
          {
            associationOrderNo: "", //关联订单号
            productNo: "",  //成品代码
            productStockNo: "", //成品规格编码
            outStockBoxs: 0,  //出库箱数
            outStockQuantity: 0,  //出库数量
            warehouseAreaCode: "",  //出库库区代码
            areaShelfCode: "",  //出库库位代码
            outStockRemark: "", //出库备注
          },
        ],
      },
      sendingTypeList: [], // 送货方式列表
      receivingTypeList: [], // 收货方式列表
      logisticsPaidList: [], // 付费方式
      departmentList: [], // 费用部门
      search: {
        QueryDataBaseFiled: "",
        pageIndex: 1,
        pageSize: 30,
        likeWords: "",
      }, // 搜索条件
      deliverySearch: {
        likeWords: "",
      },
      deliveryLists: [], // 发货单列表
      dataLists: [], // 成品出库列表
      total: 0,
      tableHeight: null,
      tableHead: [], // 表头
      rules: {},
    };
  },
  created() {
    // 成品出库表头
    this.getTableHead();
    // 库区库位
    this.getStorageLocations();
    // 获取送货方式数据列表
    this.getSendList();
    // 获取收货方式数据列表
    this.getReceivingList();
    // 获取费用部门数据列表
    this.getDepartmentList();
    // 获取付费方式数据列表
    this.getPayTypeList();
  },
  mounted() {
    this.calHeight();
  },
  methods: {
    // 获取付费方式数据列表
    getPayTypeList() {
      const params = {
        DictionaryCode: "LogisticsPaidType",
      };
      this.$api.warehouse.GetDictionaryByCode(params).then((res) => {
        this.logisticsPaidList = res;
      });
    },
    // 获取费用部门数据列表
    getDepartmentList() {
      this.$api.warehouse.GetDepartmentTreeData({}).then((res) => {
        this.departmentList = res;
      });
    },

    // // 费用部门
    // getFYDepartment() {
    //   this.$api.warehouse.GetDepartmentTreeData({}).then((res) => {
    //     this.FYDepartmentList = res;
    //     console.log(this.FYDepartmentList)
    //   });
    // },



    // 获取收货方式数据列表
    getReceivingList() {
      const params = {
        DictionaryCode: "ReceivingType",
      };
      this.$api.warehouse.GetDictionaryByCode(params).then((res) => {
        this.receivingTypeList = res;
      });
    },
    // 获取送货方式数据列表 receivingTypeList
    getSendList() {
      const params = {
        DictionaryCode: "SendingType",
      };
      this.$api.warehouse.GetDictionaryByCode(params).then((res) => {
        this.sendingTypeList = res;
      });
    },
    // 查看
    seeInfo(id) {
      this.isSeeDialog = true;
      const params = {
        queryBy: 1,
        queryValue: id,
      };
      this.$api.warehouse.GetSingleCPOutStockProduct(params).then((res) => {
        this.deliveryForm = res;
      });
    },

    //库位选择事件
    stockAreaChange(e){
      console.log(e)
    },

    // 同意出库
    saveAdd() {
      this.deliveryForm.associationBillNo = this.deliveryForm.deliveryBillNo
      let arr = []
      this.deliveryForm.outStockMxList.forEach((i)=>{
        i.ggCpFhList.forEach((j)=>{
          arr.push({
            associationOrderNo:i.associationOrderNo,
            productNo:i.productNo,
            productStockNo:j.productStockNo,
            outStockBoxs:j.deliveryBoxCount,
            outStockQuantity:j.deliveryQuantity,
            warehouseAreaCode : j.stockArea[0],
            areaShelfCode : j.stockArea[1]
          })
        })
      })
      this.deliveryForm.outStockMxList = arr
      const params = this.deliveryForm;
      this.$refs.deliveryForm.validate((valid) => {
        if (valid) {
          this.addLoading = true;
          this.$api.warehouse
            .CreateProductOutStockBill(params)
            .then(() => {
              this.addLoading = false;
              this.$message({
                message: "出库成功",
                type: "success",
              });
              this.isAddDialog = false
              // 成品出库列表
              this.getDataLists();
            })
            .catch(() => {
              this.addLoading = false;
            });
        }
      });
    },
    // 成品发货单确认
    async confirmSelecd(row) {
      const tableRow = JSON.parse(JSON.stringify(row));
      // tableRow.detailList.forEach(item => {
      //   item.detailList.forEach(m => {
      //     m.stockArea = []
      //   })
      // })
      // this.deliveryForm = tableRow
      console.log(row);
      this.deliveryForm = row;
      this.deliveryForm.outStockMxList.forEach((i)=>{
        i.ggCpFhList.forEach((j)=>{
          j.warehouseAreaCode = ''
          j.areaShelfCode = ''
          j.stockArea =''
        })
      })

      this.deliveryForm.outStockProductTypeName = "成品出库";
      this.deliveryForm.associationProductNo = row.code;
      this.deliveryForm.receivePerson = this.userInfo.employeeCode; // 申请人员代码
      this.deliveryForm.receivePersonName = this.userInfo.employeeName; // 申请人员名称
      this.isPickingVisible = false;
      this.isAddDialog = true;
    },
    // 新建成品出库点击事件
    newAddClick() {
      this.isPickingVisible = true;
      // 发货单列表
      this.getSelectDeliveryList();
    },
    // 库区库位
    getStorageLocations() {
      const parmas = {
        warehouseCode: "",
      };
      this.$api.warehouse.GetStockQueryAreaTreeView(parmas).then((res) => {
        this.storageLocations = res;
      });
    },
    // 发货单列表
    getSelectDeliveryList() {
      this.purLoading = true;
      this.$api.warehouse
        .GetMatchProduceLogisticss(this.deliverySearch)
        .then((res) => {
          this.deliveryLists = res;
          this.purLoading = false;
        })
        .catch(() => {
          this.purLoading = false;
        });
    },
    // 给选中一行添加class
    tableRowClassName({ row }) {
      if (this.currentRow.id === row.id) {
        return "selectd";
      }
    },
    // 成品出库列表，清除所有查询条件
    Refresh() {
      this.search = this.$options.data().search;
      this.getDataLists();
    },
    // 成品出库表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.outStockProductList,
      };
      this.$api.common.getAllTableHead(parmas).then((res) => {
        res.sort(arraySort("columnSort"));
        this.tableHead = res;
        // 成品出库列表
        this.getDataLists();
      });
    },
    // 成品出库列表
    getDataLists() {
      const params = this.search;
      this.searchLoading = true;
      this.$api.warehouse
        .GetPageProductOutStockBills(params)
        .then((res) => {
          this.dataLists = res.list;
          this.total = res.totalCount;
          this.dataList.forEach((item) => {
            for (let i in item) {
              if (!item[i] && item[i] !== 0) {
                item[i] = "--";
              }
            }
          });

          this.searchLoading = false;
        })
        .catch(() => {
          this.searchLoading = false;
        });
    },
    calHeight() {
      this.$nextTick(() => {
        const rect = this.$refs.tableCon.getBoundingClientRect();
        this.tableHeight = rect.height;
      });
    },
    closeDialog() {},
  },
};
</script>
<style lang="scss" scoped>
.deliveryBox {
  height: calc(100% - 34px);
}
.spot {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 100%;
}
.subTip {
  border-bottom: 1px #e6e6e6 solid;
  background: #f5f6f9;
  padding: 8px 16px;
}
.addWuliaoBox {
  padding: 10px 16px;

  .tableBox {
    margin-top: 16px;
    border: 1px solid #e6e6e6;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    overflow: hidden;

    .tt {
      height: 38px;
      line-height: 38px;
      padding-left: 16px;
      background: #f7f8fa;
      border-radius: 8px 8px 0 0;
    }
  }
}
</style>
